<template>
	<div class="question">
		<h5>常见问题</h5>

		<div class="item" v-for="item of state.questionList" :key="item.id">
			<div class="title">{{ item.title }}</div>
			<p v-html="item.content"></p>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { qestionList } from '@/api/my';

const state = reactive<any>({
	questionList: []
});

onMounted(() => {
	getQestionList();
});

const getQestionList = async () => {
	const res = await qestionList();
	state.questionList = res.data.dataList;
};
</script>

<style lang="scss" scoped>
.question {
	padding: 30px 15px;
	h5 {
		margin-bottom: 20px;
		font-size: 18px;
		font-weight: bold;
	}
	.item {
		margin-bottom: 30px;
		font-size: 15px;
		.title {
      margin-bottom: 5px;
			color: #333333;
			font-weight: bold;
		}
		p {
			color: #666666;
			font-size: 14px;
			line-height: 25px;
		}
	}
}
</style>
